{% extends 'it/base.html' %}
{% load task %}
{% block title_action %}{{ task.id }}#工单明细{% endblock title_action %}

{% block css_other %}
{% endblock css_other %}

{% block content %}
    <div class="container">
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h3>{{ task.id }}#工单明细</h3>
          <div class="bs-example" data-example-id="horizontal-dl">
            <dl class="dl-horizontal">
              <dt style="background: {{ task.status|bgcolor }}">问题 - {{ task.get_status }}</dt>
              <dd>{{ task.problem }}</dd>
                <br/>

              <dt>提出者</dt>
              <dd>{{ task.initiator }}</dd>

              <dt>联系电话</dt>
              <dd>{{ task.phone_number }}</dd>

              <dt>地址</dt>
              <dd>{{ task.address }}</dd>
                <br/>

              <dt>提报时间</dt>
              <dd>{{ task.how_long }}, {{ task.get_add_time }}</dd>

              <dt style="background:{% ifequal task.status 0 %}
                        {{ task.status|bgcolor }}
                    {% endifequal %}">期望时间</dt>
              <dd>{{ task.get_expect_time }}</dd>

              <dt style="background:{% ifequal task.status 1 %}
                        {{ task.status|bgcolor }}
                    {% endifequal %}">受理时间</dt>
              {% if task.accept_time %}
                <dd>{{ task.get_accept_time }}</dd>
                <dd>受理人: {{ task.acceptor }}</dd>
              {% else %}
                <dd>预计 {% predict_accept_time task %} 后受理, <a id="scheduling" href="javascript:;">查看排单</a></dd>

                <!-- 当日排单 -->
                <div class="modal fade" id="modal_scheduling" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="scheduling_ModalLabel">当日排单</h4>
                                {% csrf_token %}
                            </div>
                            <div class="modal-body">
                                <!-- 弹窗内容 -->
                            </div>
                        </div>
                    </div>
                </div>

              {% endif %}

              <dt style="background:{% ifequal task.status 2 %}
                        {{ task.status|bgcolor }}
                    {% endifequal %}">解决时间</dt>
              {% if task.resolved_time %}
                <dd>{{ task.get_resolved_time }}</dd>
              {% else %}
                <dd>预计 {% predict_resolved_time task %} 前解决</dd>
              {% endif %}
                <br/>

              <dt>总时长</dt>
              <dd style="background: {% if task.is_exceed %}
                  #fd6096;
              {% endif %}">{{ task.get_total_time }}</dd>
            </dl>
            <a class="btn btn-primary" href="{% url 'task_list' %}">返回列表</a>
          </div>

      </div>
    </div> <!-- /container -->
{% endblock content %}

{% block js_bottom_other %}
    <script type="text/javascript">
        $(function() {
            $('#scheduling').click(function () {
                var modal_scheduling = $('#modal_scheduling').children().find('.modal-body');
                modal_scheduling.html('');   // 清空

                $.ajax({
                    url: "{% url 'task_scheduling' %}",
                    data: {},
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        var now = new Date();
                        $("#scheduling_ModalLabel").text('当日排单 '+now.getMonth()+'/'+now.getDate()+' (自行协调)');
                        var task_id = {{ task.id }};
                        $.each(data.tasks, function (key, task) {
                            // 2018-04-09T10:12:00 格式在不同浏览器不兼容, 替换T为空格
                            var expect_time = new Date(task.expect_time.replace('T', ' '));
                            var hour = ('0'+expect_time.getHours().toString()).slice(-2);
                            var minute = ('0'+expect_time.getMinutes().toString()).slice(-2);
                            expect_time_format = hour+':'+minute;
                            // 判断当前工单
                            if (task.id === task_id) {
                                expect_time_format = '<mark>' + expect_time_format + '</mark>';
                            }
                            var small = '<small>'+expect_time_format+' 解决 '+task.initiator+
                                '('+task.phone_number+') 提报的'+task.id+'#工单</small><br/>';
                            modal_scheduling.append(small);
                        });

                        // 实例模态框窗口
                        $('#modal_scheduling').modal();
                        
                    }
                });
            });
        });
    </script>
{% endblock js_bottom_other %}